import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisesComponent } from './manage-crises.component';
import { ManageHeroesComponent } from './manage-heroes.component';

import { AuthenticationGuardService } from '../core/guards/authentication-guard.service';

const routes: Routes = [
    {
        path: '',
        component: AdminComponent,
        canActivate: [AuthenticationGuardService],
        children: [
            {
                // Looking at the child route under the AdminComponent, there is a path and a children property 
                // but it's not using a component. You haven't made a mistake in the configuration. 
                // You've defined a component-less route.

                // The goal is to group the Crisis Center management routes under the admin path. You don't 
                // need a component to do it. A component-less route makes it easier to guard child routes.
                path: '',
                canActivateChild: [AuthenticationGuardService],
                children: [
                    {
                        path: 'crises',
                        component: ManageCrisesComponent
                    },
                    {
                        path: 'heroes',
                        component: ManageHeroesComponent
                    },
                    {
                        path: '',
                        component: AdminDashboardComponent
                    }
                ]
            }
        ]
    }
]

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AdminRoutingModule { }
